{% extends "base.html" %}
{% load navigation_tags %}
{% load authorization_tags %}
{% block content %}
    {{ block.super }}
    {% load display_tags %}
    <div class="row">
        <div class="col-md-12">
            <div class="panel panel-default">
                <div class="panel-heading tight">
                    <h3 class="has-filters">
                        Engineers
                        <div class="dropdown pull-right">
                            <button id="show-filters" aria-label="Filters" data-toggle="collapse" data-target="#the-filters" class="btn btn-primary toggle-filters"> <i class="fa-solid fa-filter"></i> <i class="caret"></i> </button>
                        </div>
                    </h3>
                </div>
                <div id="the-filters" class="is-filters panel-body collapse {% if filtered.form.has_changed %}in{% endif %}">
                    {% include "dojo/filter_snippet.html" with form=filtered.form %}
                </div>
            </div>
            {% if users %}
                <div class="clearfix">
                    {% include "dojo/paging_snippet.html" with page=users page_size=True %}
                </div>
                <div class="panel panel-default table-responsive">
                    <table id="users"
                        class="tablesorter-bootstrap table table-condensed table-striped">
                        <tr>
                            {% comment %} The display field is translated in the function. No need to translate here as well{% endcomment %}
                            <th class="nowrap">{% dojo_sort request 'First Name' 'first_name' %}</th>
                            {% comment %} The display field is translated in the function. No need to translate here as well{% endcomment %}
                            <th class="nowrap">{% dojo_sort request 'Last Name' 'last_name' %}</th>
                            {% comment %} The display field is translated in the function. No need to translate here as well{% endcomment %}
                            <th class="nowrap">{% dojo_sort request 'User Name' 'username' 'asc' %}</th>
                            {% comment %} The display field is translated in the function. No need to translate here as well{% endcomment %}
                            <th class="nowrap">{% dojo_sort request 'Email' 'email' %}</th>
                            {% comment %} The display field is translated in the function. No need to translate here as well{% endcomment %}
                            <th class="nowrap">{% dojo_sort request 'Last Login' 'last_login'%}</th>
                            {% comment %} The display field is translated in the function. No need to translate here as well{% endcomment %}
                            <th class="nowrap, text-center">{% dojo_sort request 'Active' 'is_active' %}</th>
                            {% comment %} The display field is translated in the function. No need to translate here as well{% endcomment %}
                            <th class="nowrap, text-center">{% dojo_sort request 'Superuser' 'is_superuser' %}</th>
                        </tr>
                        {% for u in users %}
                            <tr>
                                <td><a href="{% url 'view_engineer' u.id %}">{{ u.first_name }}</a></td>
                                <td><a href="{% url 'view_engineer' u.id %}">{{ u.last_name }}</a></td>
                                <td><a href="{% url 'view_engineer' u.id %}">{{ u.username }}</a></td>
                                <td>{{ u.email }}</td>
                                <td>{{ u.last_login }}</td>
                                <td class="text-center">{% if u.is_active %}
                                    <i class="text-success fa-solid fa-check"></i>{% else %}
                                    <i class="text-danger fa-solid fa-xmark"></i>{% endif %}</td>
                                <td class="text-center">{% if u.is_superuser %}
                                    <i class="text-success fa-solid fa-check"></i>{% else %}
                                    <i class="text-danger fa-solid fa-xmark"></i>{% endif %}</td>
                                </tr>
                        {% endfor %}
                    </table>
                </div>
                <div class="clearfix">
                    {% include "dojo/paging_snippet.html" with page=users page_size=True %}
                </div>
            {% else %}
                <h5> No Users </h5>
            {% endif %}
        </div>
    </div>

{% endblock %}
{% block postscript %}
    {{ block.super }}
    {% include "dojo/filter_js_snippet.html" %}
{% endblock %}
